<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="admin_fragments :: head(管理后台欢迎页)">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>新闻发布系统管理</title>

</head>
<body>
<div class="layui-fluid">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md12">
      <div class="layui-card">
        <div class="layui-card-body">
          <label style="margin-right: 5px">请选择省份</label>
          <div class="layui-inline layui-show-xs-block layui-col-space5 layui-form">
            <select id="search_type" name="typeName">
              <option value="2018">2018</option>
              <option value="2019">2019</option>
              <option value="2020">2020</option>
              <option value="2021">2021</option>
            </select>
          </div>

          <!--搜索按钮-->
          <div class="layui-inline layui-show-xs-block">
            <button class="layui-btn " id="search_btn" lay-submit="" lay-filter="search"><i
                    class="layui-icon">&#xe615;</i></button>
          </div>
        </div>

      </div>
      <div class="layui-card ">
        <div class="layui-panel">
          <div style="padding: 18px; display: flex; justify-content: center">
            <span id="title" style="font-size: 15px">2018年~2021年平均价格统计</span>
          </div>
        </div>
        <div class="layui-card-body">
          <div class="map">
            <div class="chart layui-col-sm12">图表模块</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div th:replace="admin_fragments :: script"></div>

  <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>

  <script th:inline="javascript">
    /*<![CDATA[*/
    const title = document.querySelector('#title');
    const timeouts = [];
    layui.use(['form'], function() {
      var form = layui.form;
      var $ = layui.jquery;
      // 初始化选择框
      form.render('select');

      $(document).on('click', '#search_btn', function (data) {
        data.preventDefault()
        var selectedProvince = $('#search_type').val();
        console.log(selectedProvince);
        timeouts.forEach((timeoutId) => {
          clearTimeout(timeoutId);
        });
        loadDataAndRenderMap(selectedProvince); // 调用新创建的函数以加载数据并显示地图
      })
    });

    function loadDataAndRenderMap(year) {
      var myChart = echarts.init(document.querySelector('.map .chart'));
      var option;
      var updateFrequency = 3500;
      var allData;

      function updateChart(monthData, year, month) {
              var provinces = Object.keys(monthData);
              var prices = provinces.map(function (province) {
                return monthData[province] || 0;
              });

              option = {
                color: '#125acc',
                xAxis: {
                  type: 'value',
                  max: 'dataMax'
                },
                yAxis: {
                  type: 'category',
                  data: provinces,
                  inverse: true
                },
                series: [{
                  realtimeSort: true,
                  name: 'price',
                  type: 'bar',
                  data: prices,
                  label: {
                    show: true,
                    formatter: function (params) {
                      return params.value.toFixed(1);
                    }
                  },
                  animationDuration: updateFrequency,
                  animationEasing: 'linear',
                  animationEasingUpdate: 'linear'
                }],
                graphic: {
                  elements: [{
                    type: 'text',
                    style: {
                      text: year + ' ' + month + '月',
                      font: 'bolder 80px monospace',
                      fill: 'rgba(100, 100, 100, 0.25)'
                    },
                    right: 0,
                    bottom: 60,
                    z: 100
                  }]
                }
              };

              myChart.setOption(option, true);
            }

      function fetchAndUpdate() {
        $.ajax({
          url: '/dynamic_bar_chart',
          type: 'GET',
          data: {
            year: year
          },
          success: function (data) {
            title.textContent = year + '年所有省份平均价格变化图表';
            layer.alert('查询成功！', {icon: 1}, function(index){
              layer.close(index);
            });
            allData = data;
            console.log("动态柱形图")
            var months = Object.keys(allData);
            months.sort();

            months.forEach((month, index) => {
              const timeoutId = setTimeout(function () {
                updateChart(allData[month], year, month);
              }, updateFrequency * index);
              timeouts.push(timeoutId);
            });
          },
          error: function (error) {
            console.log('Error:', error);
          }
        });
      }
      fetchAndUpdate()
      window.addEventListener('resize',function(){
        myChart.resize();
      });
    }
    $(document).ready(function() {
      $('.ui.dropdown').dropdown({
        on : 'hover'
      });
      $('.ui.accordion').accordion({duration:'click'});
      title.textContent = '2018年所有省份平均价格变化图表';
      loadDataAndRenderMap("2018"); // 页面加载时显示2018年所有省份平均价格变化图表
    });
    /*]]>*/
  </script>
</body>
</html>